<template>
  <div>
    <mu-bottom-sheet :open="bottomSheet" @close="closeBottomSheet">
      <mu-list @itemClick="closeBottomSheet">
        <mu-sub-header> 歌曲: {{ musicName }} </mu-sub-header>
        <mu-list-item title="收藏到歌单" @click="collection(id)" />
        <mu-list-item
          :title="'歌手:' + artist[0].name"
          @click="toArtist(artist[0].id)"
        >
        </mu-list-item>
      </mu-list>
    </mu-bottom-sheet>
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { Artist } from "@/model/music-info.model";
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import Router from "vue-router";
@Component({})
export default class MoreMusicMsgComponent extends Vue {
  @Prop()
  bottomSheet: boolean;
  @Prop()
  musicName: string;
  @Prop()
  id: CommonIdType;
  @Prop()
  artist: Artist[];

  $router: Router;
  $api: APIType;

  closeBottomSheet() {
    this.bottomSheet = false;
  }
  @Emit("hidden")
  hiddenAction() {}
  collection(id: CommonIdType) {
    // TODO: 动态获取歌单id
    const playListId = 495727117;
    this.$api.operatePlayList("add", playListId, id).then(() => {
      this.hiddenAction();
    });
  }
  toArtist(id: CommonIdType) {
    // console.log(id)
    this.$router.push({ path: `/artist/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped></style>
